<template>
	<view class="pagesBox">
		<view class="addressBox">
			<view class="addressMain" @click="toAddressList">
				<view class="addressInfoBox">
					<view class="imageBox">
						<image :src="`${baseUrl}/static/index/address.png`" style="width: 80rpx;height: 80rpx;"></image>
					</view>
					<view class="infoMain" v-if="addressInfo.name">
						<view class="infoTop">
							<view class="infoName">{{addressInfo.name}}</view>
							<view class="infoPhone">{{addressInfo.phone}}</view>
						</view>
						<view class="infoBottom u-line-1">{{addressInfo.address}}</view>
					</view>
					<view class="addTip" v-else>请添加地址</view>
				</view>
				<view class="addressIcon"><uni-icons type="right" size="14" color="#A1A5AA"></uni-icons></view>
			</view>
		</view>
		<!-- <view class="addressBox">
			<image  :src="`${baseUrl}/static/index/bg08.png`" mode="widthFix" style="width: 100%;height: 144rpx;"></image>
			<view class="addressMain">
				<view class="addressInfoBox">
					<view class="imageBox">
						<image  :src="`${baseUrl}/static/index/icon04.png`" style="width: 64rpx;height: 64rpx;"></image>
					</view>
					<view class="infoMain" v-if="detail.store_address">
						<view class="infoTop" style="flex-direction: column;align-items: flex-start;">
							<view class="infoName">{{detail.store_address}}</view>
							<view class="infoPhone">{{detail.store_phone}}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="goodsBox">
			<block v-for="(item,index) in goodsList" :key="index">
				<view class="goodsItem">
					<view class="goodsImage">
						<image :src="item.image" style="width: 176rpx;height: 176rpx;border-radius: 16rpx;"></image>
					</view>
					<view class="goodsDetail">
						<view class="infoName u-line-3">{{item.name}}</view>
						<view class="infoBottom">
							<view class="buyNum">{{item.spec}} x {{item.goods_num}}</view>
							<view class="goodsMoney">￥<text style="font-size: 32rpx;">{{item.total}}</text></view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="workInfoBox">
			<view class="lineBox">
			    <view class="lineLeft">配送方式</view>
			    <view class="lineRight">快递</view>
			</view>
			<view class="lineBox">
			    <view class="lineLeft">支付方式</view>
			    <view class="lineRight">积分支付</view>
			</view>
			<!-- <view class="lineBox" style="align-items: center;">
				<view class="lineLeft">微信支付</view>
				<view class="lineRight">
					<u-switch @change="selectType" :active-value="1" :inactive-value="1" v-model="submitParams.wxPay" size="36" active-color="#2BA777"></u-switch>
				</view>
			</view>
			<view class="lineBox" style="align-items: center;">
				<view class="lineLeft">积分支付</view>
				<view class="lineRight">
					<u-switch @change="selectType" :active-value="2" :inactive-value="2" v-model="submitParams.jifenPay" size="36" active-color="#2BA777"></u-switch>
				</view>
			</view> -->
			<view class="lineBox" style="align-items: flex-start;">
			    <view class="lineLeft" style="padding-top: 8rpx;">备注</view>
			    <view class="lineRight" style="flex: 1;">
					<u-input v-model="submitParams.remake" placeholder="请输入备注" style="flex: 1;background-color: #f7f8fa;border-radius: 8rpx;padding: 0 12rpx;" :clearable="false" :placeholder-style="placeholderStyle" :custom-style="customStyle" type="textarea" :border="false" :height="96" maxlength="200" @input="inputChange"></u-input>
					<!-- #ifdef MP-WEIXIN -->
					<view class="textNum">{{wordNum}}/200</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view style="height: calc(130rpx + env(safe-area-inset-bottom));"></view>
		<view class="submitBox">
			<view style="display: flex;align-items: center;">
				<text class="numTotal">实际支付：
					<text class="numA"><text class="num">￥{{detail.pay_money}}</text></text>
				</text>
			</view>
			<view class="buyBox" @click="submitBefore">提交订单</view>
		</view>
	</view>
</template>

<script>
	import { isLogin } from "../../mixins/isLogin.js"
	export default {
		mixins:[isLogin],
		data() {
			return {
				baseUrl:this.$baseUrl,
				customStyle:{fontSize: '30rpx',color:'#000'},
				placeholderStyle:"font-size:30rpx;",
				addressInfo:{},
				goodsList:[],
				detail:{},
				params:{},
				couponMoney:0,
				wordNum:0,
				submitParams:{
					goods_data:"",
					address_id:"",
					pay_type:2,
					remake:"",
					wxPay:false,// true-微信，false-积分
					jifenPay:true
				},
				isRefresh:true,
				showQrcode:false,
				time:null,
				timeAddress:null,
			};
		},
		onLoad(options) {
			let param = JSON.parse(options.param)
			this.params = param;
		},
		onShow() {
			if(this.isRefresh){
				this.getBuyInfo()
			}
		},
		methods:{
			async getBuyInfo(){
				let res = await uni.$http('POST','order/buyInfo',this.params);
				if(res.code == 1){
					this.detail = res.data;
					if(res.data.is_first == 1 && res.data.goods_type == 1){
						this.showQrcode = true;
					}
					if(res.data.address.name){
						this.addressInfo = res.data.address;
						this.submitParams.address_id = res.data.address.id;
					}
					this.goodsList = res.data.list;
					let arr =[]
					for (var i = 0; i < res.data.list.length; i++) {
						let obj = {};
						obj.goods_id = res.data.list[i].goods_id;
						obj.goods_num = res.data.list[i].goods_num;
						obj.goods_spec = res.data.list[i].spec;
						arr.push(obj)
					}
					this.submitParams.goods_data = JSON.stringify(arr);
				}else if(res.msg.includes('登录')){
					uni.$u.toast(res.msg)
					uni.removeStorageSync("token")
					setTimeout(()=>{
						this.toLogin()
					},1000)
				}else{
					uni.$u.toast(res.msg)
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			},
			submitBefore(){
				if(!this.submitParams.address_id){
					uni.$u.toast('请先添加地址')
					if(this.timeAddress){
						clearTimeout(this.timeAddress)
						this.timeAddress = '';
					}
					this.timeAddress = setTimeout(()=>{
						this.toAddressList()
					},1000)
				}else{
					if(this.time){
						clearTimeout(this.time)
						this.time = '';
					}
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					this.time = setTimeout(()=>{
						this.submit()
					},700)
				}
			},
			async submit(){
				delete this.submitParams.wxPay;
				delete this.submitParams.jifenPay;
				let res = await uni.$http('POST','order/submit',this.submitParams);
				uni.hideLoading()
				if(res.code == 1){
					if(!res.data.timeStamp){
						let ress = await uni.$http('POST','order/isPay',{id:res.data.orders_id});
						if(ress.code == 1){
							uni.$u.toast('支付成功')
							setTimeout(()=>{
								uni.redirectTo({
									url:"/pagesMy/order/list?status=1"
								})
							},700)
						}else if(ress.code == 2){
							uni.$u.toast('支付失败')
							setTimeout(()=>{
								uni.redirectTo({
									url:"/pagesMy/order/list?status=0"
								})
							},700)
						}
					}else{
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: async res1 => {
								uni.showLoading({
									title:"验证支付中",
									mask:true
								})
								setTimeout(async ()=>{
									let ress = await uni.$http('POST','order/isPay',{id:res.data.orders_id});
									uni.hideLoading()
									if(ress.code == 1){
										uni.$u.toast('支付成功')
										setTimeout(()=>{
											uni.redirectTo({
												url:"/pagesMy/order/list?status=1"
											})
										},700)
									}else if(ress.code == 2){
										uni.$u.toast('支付失败')
										setTimeout(()=>{
											uni.redirectTo({
												url:"/pagesMy/order/list?status=0"
											})
										},700)
									}
								},1000)
							},
							fail() {
								uni.$u.toast('支付失败')
								setTimeout(()=>{
									uni.redirectTo({
										url:"/pagesMy/order/list?status=0"
									})
								},700)
							}
						})
					}
				}else if(res.msg.includes('积分不足')){
					uni.$u.toast(res.msg)
					// setTimeout(()=>{
					// 	uni.navigateTo({
					// 		url:"/pagesMy/jifen/recharge"
					// 	})
					// },1000)
				}else{
					uni.$u.toast(res.msg)
				}
			},
			// 支付方式
			selectType(type){
				this.submitParams.pay_type = type;
				if(type == 1){
					this.submitParams.wxPay = true;
					this.submitParams.jifenPay = false;
				}else if(type == 2){
					this.submitParams.wxPay = false;
					this.submitParams.jifenPay = true;
				}
				console.log(this.submitParams);
			},
			// 字数变化
			inputChange(){
				if(this.submitParams.remake){
					if(this.submitParams.remake.length <= 200){
						this.wordNum = this.submitParams.remake.length;
					}else{
						this.wordNum = 200;
					}
				}else{
					this.wordNum = 0;
				}
			},
			cancal(){
				uni.navigateBack()
			},
			toAddressList(){
				uni.navigateTo({
					url:"/pagesMy/address/list?comePage=confirm"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	padding: 12rpx 24rpx;
	.addressBox{
		font-size: 0%;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		position: relative;
		.addressMain{
			width: 100%;
			padding: 24rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.addressInfoBox{
				width: 100%;
				display: flex;
				align-items: center;
				.imageBox{
					font-size: 0%;
					margin-right: 16rpx;
				}
				.infoMain{
					width: calc(100% - 80rpx);
					.infoTop{
						display: flex;
						align-items: center;
						.infoName{
							font-weight: 600;
							font-size: 30rpx;
							color: #000;
						}
						.infoPhone{
							font-weight: 400;
							font-size: 28rpx;
							color: #000;
						}
					}
					.infoBottom{
						font-weight: 400;
						font-size: 24rpx;
						color: #A1A5AA;
						margin-top: 8rpx;
					}
				}
				.addTip{
					font-weight: 600;
					font-size: 32rpx;
					color: #000;
					letter-spacing: 2rpx;
				}
			}
		}
	}
	.goodsBox{
		border-radius: 16rpx;
		padding: 16rpx 16rpx 0 16rpx;
		margin-top: 16rpx;
		background-color: #FFFFFF;
		.goodsItem{
			padding-bottom: 16rpx;
			display: flex;
			align-items: center;
			.goodsImage{
				width: 176rpx;
				font-size: 0%;
				margin-right: 16rpx;
			}
			.goodsDetail{
				flex: 1;
				height: 176rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.infoName{
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
				}
				.infoBottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.goodsMoney{
						font-weight: 400;
						font-size: 28rpx;
						color: #2BA777;
					}
					.buyNum{
						font-weight: 400;
						font-size: 24rpx;
						color: #A1A5AA;
					}
				}
			}
		}
	}
	.workInfoBox{
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 24rpx;
		margin-top: 16rpx;
		.lineBox{
		    font-weight: 400;
		    font-size: 32rpx;
		    color: #16202B;
			padding: 24rpx 0;
		    // margin-bottom: 8rpx;
		    display: flex;
			justify-content: space-between;
		    align-items: center;
		    .lineLeft{
		        font-weight: 400;
		        font-size: 28rpx;
		        color: #000;
				margin-right: 16rpx;
		    }
		    .lineRight{
		        flex: 1;
				font-weight: 400;
				font-size: 28rpx;
				color: #000;
		        word-break: break-all;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				position: relative;
				// 字数
				.textNum{
					color: #000;
					position: absolute;
					bottom: 12rpx;
					right: 16rpx;
				}
				.lineMoney{
					margin-right: 12rpx;
				}
		    }
		}
	}
	.submitBox{
		min-height: calc(130rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;
		padding: 0rpx 30rpx;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 999;
		// 总计
		.numTotal{
			font-weight: 400;
			font-size: 22rpx;
			color: #A1A5AA;
			.numA{
				font-weight: 600;
				font-size: 34rpx;
				color: #2BA777;
				.num{
					font-size: 34rpx;
				}
			}
		}
		// 结算按钮
		.buyBox{
			width: 256rpx;
			height: 72rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			background: #2BA777;
			border-radius: 36rpx;
			letter-spacing: 2rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
<style>
	page{
		background-color: #f7f8fa;
	}
</style>